<template>
  <header class="header">
    <div class="header-content">
      <!-- 左侧区域：Logo + 导航选项 -->
      <div class="left-section">
        <div class="logo-container">
          <img src="@/assets/images/logo.png" alt="Logo" class="logo" />
        </div>
        
        <div class="nav-options">
          <div 
            v-for="(option, index) in navOptions" 
            :key="index"
            :class="['nav-option', { active: activeOption === index }]"
            @click="setActiveOption(index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      
      <!-- 右侧区域：搜索 + 用户信息 -->
      <div class="right-section">
        <div class="search-container">
          <input 
            type="text" 
            placeholder="搜索训练主题训练环节" 
            class="search-input"
          />
          <img src="@/assets/images/search.png" alt="搜索" class="search-icon" />
        </div>
        
        <div class="user-container">
          <img src="@/assets/images/info.png" alt="信息" class="info-icon" />
          <span class="username" @click="showLoginModal">{{ username }}</span>
          <div class="divider"></div>
          <img src="@/assets/images/close.png" alt="关闭" class="close-icon" />
          <span class="logout">退出</span>
        </div>
      </div>
    </div>
    
    <!-- 登录弹窗 -->
    <LoginModal v-if="isLoginModalVisible" @close="hideLoginModal" />
  </header>
</template>

<script setup>
import { ref } from 'vue'
import LoginModal from './LoginModal.vue'

// 导航选项
const navOptions = ref(['首页', '内容库'])
const activeOption = ref(0)
const username = ref('用户名')

// 登录弹窗状态
const isLoginModalVisible = ref(false)

// 设置活动选项
const setActiveOption = (index) => {
  activeOption.value = index
}

// 显示登录弹窗
const showLoginModal = () => {
  isLoginModalVisible.value = true
}

// 隐藏登录弹窗
const hideLoginModal = () => {
  isLoginModalVisible.value = false
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, #00429A 0%, #0659CB 100%);
  display: flex;
  align-items: center;
  // justify-content: center;
}

.header-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 260px 0 251px;
  position: relative;
  box-sizing: border-box;
}

.left-section {
  display: flex;
  align-items: center;
  flex: 1;
}

.logo-container {
  .logo {
    width: 230px;
    height: 100%;
    object-fit: contain;
  }
}

.nav-options {
  display: flex;
  align-items: center;
  margin-left: 81px;
  gap: 45px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 13px;
}

.nav-option {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 500;
  font-size: 22px;
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.active {
    background: url('@/assets/images/jx.png') no-repeat center;
    background-size: 134px 50px;
    border-radius: 25px;
    width: 134px;
  }
  
  &:hover:not(.active) {
    opacity: 0.8;
  }
}

.search-container {
  width: 303px;
  height: 55px;
  background: #FFFFFF;
  border-radius: 28px;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 25px 0 21px;
  
  .search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #B7B7B7;
    
    &::placeholder {
      color: #B7B7B7;
    }
  }
  
  .search-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}

.user-container {
  width: 254px;
  height: 55px;
  background: #FFFFFF;
  border-radius: 28px;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 29px 0 9px;
  
  .info-icon {
    width: 44px;
    height: 44px;
  }
  
  .username {
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #004097;
    margin-left: 11px;
    white-space: nowrap;
    cursor: pointer;
    
    &:hover {
      opacity: 0.8;
    }
  }
  
  .divider {
    width: 1px;
    height: 20px;
    background: #D1D5DB;
    margin-left: 29px;
  }
  
  .close-icon {
    width: 16px;
    height: 16px;
    margin-left: 21px;
    cursor: pointer;
  }
  
  .logout {
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #004097;
    margin-left: 9px;
    cursor: pointer;
    white-space: nowrap;
    
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
